<template>
	<!-- 充值页面 -->
	<view>
		<view class="recharge-class">
			<!-- 用户头像和用户当前得一个金额 -->
			<view class="user-class">
				<view class="img-user" align="center">
					<img :src="user.urAvatar">
				</view>
				<view class="yue-e" align="center">
					当前余额:<text style="color: red;">￥{{user.urWallet}}</text>
				</view>
			</view>
			<view class="list">
				<view style="font-size: 15px;">
					充值金额
				</view>
				<view :class="`${index==i?' xz':'list-item'}`" v-for="(number,i) in ns" @click="xzprice(i)">
					{{number}}元
				</view>
			</view>
			<view style="position: relative;font-size: 15px;">
				支付方式
			</view>
			<view class="zfb-pay-item">
				<view class="left-class">
					<img src="../../static/user/icon-wxpay-active.png" />
					<text>支付宝支付</text>
				</view>
				<img class="right-img-class" src="../../static/user/icon-checked-active.png">
			</view>

		</view>
		<!-- 支付二维码 -->
		<view class="cu-modal bottom-modal" :class="modalName=='ChooseModal'?'show':''" @tap="hideModal">
			<view class="cu-dialog" @tap.stop="">
				<view class="cu-bar bg-white">
					<view class="action text-blue" @tap="hideModal">取消</view>
					<view class="action text-green" @tap="submit">确定</view>
				</view>
				<view class="grid col-3 padding-sm">
					<view class="padding-xs">
						{{statusText}}
						<center>
							<view style="position: relative;
							 left: 90%;">
								<img :src="payImg">
							</view>
						</center>

					</view>
				</view>
			</view>
		</view>
		<view class="dbu-lan">
			充值金额
			<text style="color: red;position: relative;left: 10%;">￥{{price}}</text>
		</view>
		<text class="submit-pay" @click="paySubmit">
			充值
		</text>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				payImg: "",
				price: 10,
				modalName: "",
				id: 0,
				end: false,
				uuid: "",
				index: 0,
				ns: [10, 20, 50, 70, 100, 150, 300, 500, 1000],
				user: {},
				url: this.$url + "/frontend",
				statusText: "",
				urId: sessionStorage.getItem("urId"),
			}
		},
		onShow() {
			this.info()
		},
		methods: {
			//跳转支付
			paySubmit() {
				var data = {
					rdUrId: this.urId,
					rdPrice: this.price
				}
				var _this = this;
				uni.request({
					url: `${this.url}/pay/getPaymentCode`,
					method: "POST",
					data: data,
					success: ({
						data
					}) => {
						//console.log(window.location)
						this.end = false
						_this.modalName = "ChooseModal",
							this.payImg = "data:image/png;base64," + data.data.payUrl
						this.uuid = data.data.uuid
						this.dsq()
					}
				})
			},

			//获取支付状态的方法
			getStus() {
				var _this = this
				var data = {
					rdUuid: this.uuid
				}
				uni.request({
					url: `${this.url}/pay/getPayStatus`,
					method: "POST",
					data: data,
					success: ({
						data
					}) => {
						//console.log(data.message === "支付成功")
						if (data.message === "支付成功") {
							sessionStorage.setItem("dsqId", true)
							//	clearInterval(this.id)
							_this.$router.go(0);
						} else {
							this.statusText = data.message
						}
						//this.dsq()
					}
				})

			},
			//定时器
			dsq() {
				var _this = this
				var id = setInterval(function() {
					console.log(sessionStorage.getItem("dsqId"))
					if (sessionStorage.getItem("dsqId")) {
						clearInterval(sessionStorage.getItem("dsq"))
					}
					sessionStorage.setItem("dsq", id)
					_this.getStus()
				}, 5000)
			},
			submit() {
				this.hideModal()
			},
			showModal(e) {
				this.modalName = e.currentTarget.dataset.target
			},
			hideModal(e) {
				this.modalName = null
				this.end = true
				sessionStorage.setItem("dsqId", true)
				this.statusText = ""
			},
			xzprice(i) {
				this.index = i;
				this.price = this.ns[i]
			},
			info() {
				if (this.urId) {
					this.showLogin = false
					uni.request({
						url: `${this.url}/user/info/${this.urId}`,
						method: "GET",
						success: ({
							data
						}) => {
							this.user = data.data.cbbUser;
							this.wzs[0].number = "￥" + this.user.urWallet
						}
					})
				} else {
					this.showLogin = true
				}
			}
		}
	}
</script>

<style scoped>
	.pay-erwm-class img {
		position: absolute;
		top: 30%;
		left: 20%;
		width: 60%;
		height: 30%;
		opacity: 1;
	}

	.pay-erwm-class {
		position: fixed;
		margin: 0 auto;
		width: 100%;
		top: 0;
		height: 100%;
		background-color: #000000;
		opacity: 0.65;

	}

	.submit-pay {
		position: absolute;
		right: 10px;
		width: 120px;
		height: 50px;
		border-radius: 20px;
		text-align: center;
		line-height: 50px;
		color: #FFFFFF;
		font-size: 15px;
		background-color: #007AFF;
		bottom: 0;
	}

	.dbu-lan {
		position: absolute;
		bottom: 0;
		font-size: 18px;
	}

	.right-img-class {
		position: absolute;
		right: 30px;
		width: 15px;
		height: 15px;
		top: 35%;
	}

	.left-class text {
		position: relative;
		left: 20%;
		font-size: 15px;
		color: #007AFF;
	}

	.left-class {
		position: relative;
		line-height: 58px;
		left: 10%;
		float: left;
	}

	.left-class img {
		position: relative;
		width: 30px;
		height: 30px;
		top: 5px;
	}

	.zfb-pay-item {
		position: relative;
		width: 90%;
		float: left;
		height: 55px;
		left: 5%;
		border: 2px solid #007AFF;
		margin-top: 10px;
		border-radius: 50px;
	}

	.img-user img {
		position: relative;
		width: 20%;
		border-radius: 10%;
	}

	.img-user {
		position: relative;
		width: 100%;
	}

	.user-class {
		position: relative;
		width: 100%;
	}

	.xz {
		position: relative;
		width: 30%;
		height: 50px;
		margin-top: 20px;
		float: left;
		margin-left: 2%;
		border-radius: 5px;
		text-align: center;
		font-size: 15px;
		color: #FFFFFF;
		box-shadow: 0 0 5px #5555ff;
		line-height: 50px;
		background-image: linear-gradient(to right, #008aff, #3242d6)
	}

	.list-item {
		position: relative;
		width: 30%;
		height: 50px;
		margin-top: 20px;
		float: left;
		margin-left: 2%;
		background-color: #e0e6e9;
		border-radius: 5px;
		text-align: center;
		font-size: 15px;
		line-height: 50px;
	}

	.list {
		position: relative;
		width: 100%;
		height: 240px;
	}

	.recharge-class {
		position: relative;
		width: 100%;
		top: 10px;
	}
</style>
